<template>
  <div>
    <el-dialog :visible.sync="visible" :width="dialogWidth" center :before-close="close">
      <div class="content" v-if="!showReason">{{ title }}</div>

      <el-form
        v-if="showReason"
        :rules="rulesForm"
        :model="form"
        size="small"
        ref="cancelform"
      >
        <el-form-item prop="cancelReason" label="拒绝原因">
          <el-input
            placeholder="请输入拒绝原因"
            v-model="form.cancelReason"
            clearable
          ></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="close" size="mini">取 消</el-button>
        <el-button type="primary" class="right-btn" @click="confirm" size="mini">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "SpecialDialog",
  props: {
    title: {
      type: String,
      default: "提示",
    },
    content: {
      type: String,
      default: "",
    },
    visible: {
      type: Boolean,
      default: false,
    },
    showReason: {
      type: Boolean,
      default: false,
    },
    dialogWidth: {
      type: String,
      default: '70%'
    }
  },
  watch: {
    visible() {
      this.form = {
        cancelReason: null,
      };
    },
  },
  data() {
    return {
      rulesForm: {
        cancelReason: { required: true, message: "请输入拒绝原因" },
      },
      form: {
        cancelReason: "",
      },
    };
  },
  mounted() {},
  methods: {
    close() {
      this.$emit("close");
    },
    confirm() {
      if (this.showReason) {
        this.$refs.cancelform.validate((valid) => {
          if (valid) {
            this.$emit("confirm", { cancelReason: this.form.cancelReason });
          }
        });
      } else {
        this.$emit("confirm");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  text-align: center;
  margin-bottom: 10px;
}
.dialog-footer {
  .right-btn {
    margin-left: 30px;
  }
}
</style>

<style lang="scss">
.el-form-item {
  margin-bottom: 10px;
}
</style>
